<!--  -->
<template>
  <div class="app-container">
    <el-form ref="form" :inline="true" :model="form" label-width="150px" :rules="rules">
      <el-col v-if="form.cate_id == 2 || form.cate_id == 3" :span="24">
        <el-form-item :label="positionName" prop="position">
          <el-select v-model="form.position" placeholder="请选择" clearable>
            <el-option
              v-for="(item,index) in positionList"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item :label="name" prop="name">
          <el-input v-model="form.name" placeholder="请输入" clearable />
        </el-form-item>
      </el-col>
      <el-col v-if="form.cate_id == 1" :span="24">
        <el-form-item label="排序" prop="sort">
          <el-input v-model="form.sort" type="number" placeholder="请输入" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="选择省份" prop="province_id">
          <el-select v-model="form.province_id" placeholder="选择省份" clearable>
            <el-option
              v-for="(item,index) in provinceList"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col v-if="form.cate_id == 4" :span="24">
        <el-form-item label="弹窗位置" prop="position">
          <el-input v-model="form.position.name" placeholder="首页" disabled clearable />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="跳转类型" prop="link_type">
          <el-select
            v-model="form.link_type"
            placeholder="单个项目详情"
            @change="getLinkContent"
            clearable
          >
            <el-option
              v-for="(item,index) in linkTypeList"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          :label="form.cate_id == 1 || form.cate_id == 4 ? '选择内容':'选择项目'"
          prop="link_content"
        >
          <el-input
            v-model="form.link_content"
            v-if="form.link_type == 5"
            placeholder="请输入链接"
            clearable
          />
          <el-select
            v-model="form.link_content"
            v-else
            placeholder="选择具体项目"
            filterable
            remote
            :remote-method="remoteMethod"
            :loading="loading"
            :multiple="isMultiple()"
            :disabled="form.link_type !=='' ?false:true"
            :key="form.link_type"
            clearable
          >
            <el-option
              v-for="item in linkContentList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="添加展示图" prop="image">
          <newUpload ref="uploadImg" :fileNum="1" :file-list="images" />
        </el-form-item>
      </el-col>
      <div class="sub-btn">
        <el-button type="primary" @click="submit">{{page_status == 1 ? '添加':'编辑'}}</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import {
  appShow,
  appStore,
  appUpdate,
  appCreate,
  appGetLinkContent,
} from "@/api/appList";
import newUpload from "@/components/UploadImg/shopImgUp";
export default {
  name: "AddEntrance",
  components: { newUpload },
  data() {
    return {
      form: {
        position: 1,
        name: "",
        image: [],
        sort: 0,
        province_id: "",
        link_type: "",
        link_content: "",
        cate_id: this.cate_id,
      },
      positionList: [],
      provinceList: [],
      linkTypeList: [], // 跳转类型：1-项目详情，2-礼包详情，3-项目关键词 4-礼包关键词 5-H5活动页面
      linkContentList: [],
      name: "",
      positionName: "",
      page_status: "",
      images: [], // 用来接收上传图片的数组
      loading: false, // 远程搜索loading
      rules: {
        position: [
          {
            required: true,
            message: "请选择位置",
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            message: "名称不能为空",
            trigger: "blur",
          },
        ],
        image: [
          {
            required: true,
            message: "请添加展示图",
          },
        ],
        sort: [
          {
            required: true,
            message: "排序不能为空",
            trigger: "blur",
          },
        ],
        province_id: [
          {
            required: true,
            message: "请添选择省份",
            trigger: "change",
          },
        ],
        link_type: [
          {
            required: true,
            message: "请添选择跳转类型",
            trigger: "change",
          },
        ],
        link_content: [
          {
            required: true,
            message: "请添选择项目",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    // 页面状态  1 添加  2 编辑
    this.page_status = this.$route.query.type == "add" ? 1 : 2;
    this.form.cate_id = this.$route.query.cate_id;
    console.log("cate_id", this.form.cate_id);
    this.initView();
    this.initData();
    if (this.page_status == 2) this.showInfo(this.$route.query.id);
  },

  methods: {
    initView() {
      /*
       *cate_id：1.添加轮播图 2.添加主要入口 3.添加营销矩阵 4.弹窗管理
       */
      switch (+this.form.cate_id) {
        case 1:
          this.name = "轮播图名称";
          break;
        case 2:
          this.positionName = "主要入口位置";
          this.name = "主要入口名称";
          break;
        case 3:
          this.positionName = "营销矩阵位置";
          this.name = "营销矩阵名称";
          break;
        case 4:
          this.name = "弹窗名称";
          break;
      }
    },
    strToArrayForId(_str) {
      return _str
        .split(",")
        .map((item) => parseInt(item))
        .filter((item) => !isNaN(item));
    },
    isMultiple() {
      return this.form.link_type == 3 || this.form.link_type == 4;
    },
    async initData() {
      let { data } = await appCreate({ cate_id: this.form.cate_id });
      this.positionList = data.data.positionArray;
      this.provinceList = data.data.provinceArray;
      this.linkTypeList = data.data.linkTypeArray;
      if (data.status != 0 && data.status != 200)
        this.$message.error(data.message);
    },
    // 项目内容 关键词
    async getLinkContent() {
      this.form.link_content = "";
      if (this.isMultiple()) this.form.link_content = [];
      if (!this.form.link_type) return;

      let { data } = await appGetLinkContent({
        link_type: this.form.link_type,
      });
      // this.linkContentList = data.data;
      this.linkContentList = [];
      data.data.forEach((item, i) => {
        this.$set(this.linkContentList, i, { id: item.id, name: item.name });
      });
      if (data.status != 0 && data.status != 200)
        this.$message.error(data.message);
    },
    // 远程搜索
    async remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        let { data } = await appGetLinkContent({
          link_type: this.form.link_type,
          keyword: query,
        });
        this.loading = false;
        this.linkContentList = data.data;
        console.log(data);
        if (data.status != 0 && data.status != 200)
          this.$message.error(data.message);
      } else {
        // this.linkContentList = [];
      }
    },
    // 详情
    async showInfo(id) {
      let { data } = await appShow({ id });
      this.form.link_type = data.data.link_type;
      this.getLinkContent();
      this.form = data.data;
      if (this.isMultiple()) {
        this.$set(
          this.form,
          "link_content",
          this.strToArrayForId(this.form.link_content)
        );
      } else if (this.form.link_type == 5) {
        this.$set(this.form, "link_content", data.data.link_content);
      } else {
        this.$set(this.form, "link_content", +data.data.link_content);
      }
      this.images = [
        { url: "https://img.yuepinyuemei.com/" + this.form.image },
      ];
      this.$refs.uploadImg.getLength(this.images);
      console.log(this.form);
      if (data.status != 0 && data.status != 200)
        this.$message.error(data.message);
    },
    async submit() {
      // 图片效验
      this.form.image = this.$refs.uploadImg.submitUpload()[0];
      // 效验
      if (!this.form.name) return this.$message.error(this.name + "不能为空");
      if (this.form.cate_id == 1 && this.form.sort == "")
        return this.$message.error("排序不能为空");
      if (!this.form.province_id) return this.$message.error("请选择省份");
      if (!this.form.link_type) return this.$message.error("请选择跳转类型");
      if (!this.form.link_content) return this.$message.error("请选择项目");
      if (this.isMultiple())
        this.form.link_content = this.form.link_content.join();
      if (!this.form.image || this.form.image.length == 0)
        return this.$message.error("请添加展示图");

      let res;
      if (this.page_status == 1) {
        res = await appStore(this.form);
        console.log("添加", res);
      } else {
        res = await appUpdate(this.form);
        console.log("修改", res);
      }

      if (!res) return this.$message.error("服务器网络波动，请稍后再试！");
      if (res.data.status == 0 || res.data.status == 200) {
        this.$message.success(res.data.message);
        this.$router.go(-1);
      } else {
        this.$message.error(res.data.message);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.sub-btn {
  .el-button {
    margin: 80px auto 20px 150px;
    display: block;
  }
}
</style>
